<template>
  <div class="page_type_home">
    <img src="https://img2.baidu.com/it/u=533202679,2154719364&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400" alt="" />
    <div class="flex center-box link f20">
      <div class="box one_box mr12 fwb" @click="handleTypeJump('experience')">模块1</div>
      <div class="box two_box fwb" @click="handleTypeJump('learn')">模块2</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { learnMenuList, experienceMenuList } from '@/utils/menu'

const router = useRouter()
const store = useStore()
// 不同模块采用不同的菜单
const handleTypeJump = (type: string) => {
    const menuList = type === 'learn' ? learnMenuList : experienceMenuList
    if (type === 'learn') {
        router.push('/index')
    } else {
        router.push('/experience/news')
    }
    store.commit('setMenuList', menuList)
    store.commit('setActiveMenu', '1')
}
</script>

<style lang="less" scoped>
.page_type_home {
  position: relative;
  img {
    width: 100vw;
    height: 100vh;
  }

  .center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    color: #fff;
    .box {
      width: 200px;
      height: 100px;
      background-color: blue;
      position: relative;
    }

    .box:before {
      content: '';
      position: absolute;
      top: -60px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 60px solid blue;
    }

    .box:after {
      content: '';
      left: 0;
      width: 0;
      height: 0;
      bottom: -60px;
      position: absolute;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-top: 60px solid blue;
    }
    .one_box {
      text-align: center;
      line-height: 100px;
    }
    .two_box {
      text-align: center;
      line-height: 100px;
      background-color: rgb(50, 16, 175);
    }
    .two_box::before {
      border-bottom: 60px solid rgb(50, 16, 175);
    }
    .two_box::after {
      border-top: 60px solid rgb(50, 16, 175);
    }
  }
}
</style>
